<!DOCTYPE html>
<html class="no-js css-menubar" lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
  <meta name="description" content="bootstrap admin template">
  <meta name="author" content="">
  <script type="text/javascript" src="../_resource/js/header.js"></script>
  <script>
    var RUN_FUNCS = [];
	var SITE_URL  = "http://admin.html.me";
	var CURR_CONTROLLER  = "User";
	var CURR_ACTION  = "edit";
    Breakpoints();
  </script>
  <style type="text/css">
    .list-table table td, .list-table table th{background:#fff; text-align:center;}
    .__access{display: none;}
    .basic-info-panel{display: none;}
    .basic-info-panel-active{display: block;}
    textarea{resize: none;}
    .ui-autocomplete {
      max-height: 200px;
      overflow-y: auto;
      /* prevent horizontal scrollbar */
      overflow-x: hidden;
    }
    /* IE 6 doesn't support max-height
     * we use height instead, but this forces the menu to always be this tall
     */
    * html .ui-autocomplete {
      height: 200px;
    }
    .modal-backdrop{
      z-index: 2;
      opacity: 0;
    }
  </style>
  </head>
<body class="dashboard">
  <!--[if lt IE 8]>
  <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->

  <nav class="site-navbar navbar navbar-default navbar-fixed-top navbar-mega" role="navigation" id="navbardefaultmodel">
       <script type="text/javascript" src="../_resource/js/include.js" onload="HM.SomeFun('head_html')"></script>
  </nav>
  <div class="site-menubar">
    <div class="site-menubar-body" id="site-menubar-body">
         <script type="text/javascript" src="../_resource/js/include.js" onload="HM.SomeFun('nav_html')"></script>
    </div>
  </div>

  <!-- Page -->
  <div class="page">
    <div class="page-content container-fluid">
          <style>
        .btn-round{position:absolute;right:10px;top:10px;z-index:999}
    </style>
    
<div class="panel">
    <div class="panel-heading">
        <h3 class="panel-title"></h3>
        <div class="panel-actions">
            <div class="dropdown">
                <a class="panel-action" data-toggle="dropdown" href="#" aria-expanded="false" id="edit-user-top-info" title="Edit">
                    <i class="icon wb-pencil" aria-hidden="true"></i>
                </a>
                <a class="panel-action" data-toggle="dropdown" href="#" aria-expanded="true" id="edit-user-top-info-cancel" title="Cancel" style="display: none;">
                    <i class="icon wb-close" aria-hidden="true"></i>
                </a>
            </div>
        </div>
    </div>
    <div style="width:100%;text-align: center;padding-top:10px;">
        <img src="../_resource/images/avatar.jpg" id="user-top-info-avatar" style="width:100px;height:100px;border-radius:1000px;"/>
    </div>
    <div class="panel-body">
        <form id="exampleStandardForm" autocomplete="off" class="form-horizontal">
            <div class="row row-lg">
                <div class="col-lg-6 form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Email</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="user-top-info-email" name="email" value="" disabled>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Mobile</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="user-top-info-mobile" name="phone_num" value="" disabled>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">First Name</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" name="first_name" id="user-top-info-firstname" value="" disabled>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Last Name</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" name="last_name" id="user-top-info-lastname" value="" disabled>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Date of Birth</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" name="birthdate" data-plugin="datepicker" id="user-top-info-birthdate" value="" disabled>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Password</label>
                        <div class="col-sm-9">
                            <input type="password" class="form-control" name="password" id="user-top-info-password" disabled>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">User Type</label>
                        <div class="col-sm-9">
                            <select class="form-control form-control-sm" name="user_type" id="user-top-info-usertype" disabled>
                                <option value="0" >Unknown</option>
                                <option value="job_seeker" >Jobseeker</option>
                                <option value="recruiter" >Recruiter</option>
                                <option value="job_seeker-recruiter" >Jobseeker & Recruiter</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Status</label>
                        <div class="col-sm-9">
                            <select class="form-control form-control-sm" name="is_restricted" id="user-top-info-userstatus" disabled>
                                <option value="0" >Unknown</option>
                                <option value="active" >Activate</option>
                                <option value="inactive" >Deactivate</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Gender</label>
                        <div class="col-sm-9">
                            <select class="form-control form-control-sm" name="genders" id="user-top-info-gender" disabled>
                                <option value="0">Unknown</option>
                                <option value="male">Male</option>
                                <option value="female">Female</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Age</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" name="age" id="user-top-info-age" disabled>
                        </div>
                    </div>
                </div>
                <div class="form-group col-lg-12 text-right padding-top-m" id="edit-user-top-info-submit" style="display: none;">
                    <button type="submit" class="btn btn-primary" id="validateButton2">Submit</button>
                </div>
            </div>
        </form>
    </div>
</div>   

<div class="nav-tabs-horizontal" >
    <ul class="nav nav-tabs nav-tabs-line"  style="background: #fff;">
        <li class="nav-item active" data-usertype="seeker" style="display: none;"><a class="nav-link" href="#" data-usertype="seeker">Jobseeker</a></li>
        <li class="nav-item" data-usertype="recruiter" style="display: none;"><a class="nav-link" href="#" data-usertype="recruiter">Recruiter</a></li>
    </ul>
</div>
            
<div class="panel">
        
    <div class="basic-info-panel basic-info-panel-active" id="seeker-basic-info-panel">
        <div class="panel">
            <div class="panel-heading">
                <h3 class="panel-title">Basic Info</h3>
                <div class="panel-actions">
                    <div class="dropdown">
                        <a class="panel-action" data-toggle="dropdown" href="#" aria-expanded="false" title="Edit" id="edit-user-basic-info">
                            <i class="icon wb-pencil" aria-hidden="true"></i>
                        </a>
                        <a class="panel-action" data-toggle="dropdown" href="#" aria-expanded="true" id="edit-user-basic-info-cancel" title="Cancel" style="display: none;">
                            <i class="icon wb-close" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>
            </div>
            <form id="exampleFullForm" autocomplete="off" novalidate="novalidate" class="fv-form fv-form-bootstrap">
                <button type="submit" class="fv-hidden-submit" style="display: none; width: 0px; height: 0px;"></button>
                <div class="row row-lg">
                    <div class="col-lg-6 form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">Experience Level</label>
                            <div class="col-sm-9">
                                <select class="form-control form-control-sm" id="user-basic-info-seeker-experience" name="xp_lvl_key" disabled>
                                    <option value="0" selected="selected">Unknown</option>
                                    <option value="fresh_graduate" >Fresh Graduate</option>
                                    <option value="1_to_3_years" >1 - 3 years</option>
                                    <option value="3_to_5_years">3 - 5 years</option>
                                    <option value="5_to_10_years" >5 - 10 years</option>
                                    <option value="above_10_years" >&gt; 10 years</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">Employment Status</label>
                            <div class="col-sm-9">
                                <select class="form-control form-control-sm" id="user-basic-info-seeker-employstatus" name="xp_lvl_key" disabled>
                                    <option value="0" selected="selected">Unknown</option>
                                    <option value="unemployed" >Unemployed</option>
                                    <option value="employed">Employed</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group col-lg-12 text-right padding-top-m" style="display: none;">
                        <button type="button" class="btn btn-primary" id="edit-user-seeker-basic-submit">Submit</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="panel">
            <div class="panel-heading">
                <h3 class="panel-title">Work Experience</h3>
                <div class="panel-actions">
                    <div class="dropdown">
                        <a class="panel-action" data-toggle="modal" data-target="#workExperienceModal"  href="#" aria-expanded="false" title="Add">
                            <i class="icon wb-plus-circle" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="panel-body" style="max-height: 882px;overflow-y: auto;" id="user-work-experience-panel"></div>
        </div>
        <div class="panel">
            <div class="panel-heading">
                <h3 class="panel-title">Education Experience</h3>
                <div class="panel-actions">
                    <div class="dropdown">
                        <a class="panel-action" data-toggle="modal" data-target="#educationExperienceModal" href="#" aria-expanded="false" title="Add">
                            <i class="icon wb-plus-circle" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="panel" style="max-height: 658px;overflow-y: auto;" id="user-education-experience-panel"></div>
        </div>
<div class="panel">
    <div class="panel-heading">
        <h3 class="panel-title">Resume</h3>
    </div>
    <div class="panel-body">
        <div id="resumeForm-form-item"  class="form-group " style="" >
            <label for="resumeForm" class="control-label  none "></label>
            <div>
                <div class="input-group input-group-file" id="resumeForm" class="" style="" >
                    <input type="text" id="user-using-resume" class="form-control" readonly="readonly" disabled="disabled" placeholder="This user have not uploaded any resume..." value="">
                    <span class="input-group-btn">
                        <a id="file-user-resume-link" class="btn btn-info" target="_blank" style="display:none;">
                            <i class="icon wb-eye" aria-hidden="true"></i>
                        </a>
                        <span class="btn btn-success btn-file">
                            <i class="icon wb-upload" aria-hidden="true"></i>
                            <input type="file" id="file-user-resume" name="resume" readonly="readonly" data-allowed-formats="pdf" />
                        </span>
                    </span>
                </div>
                <div id="file-user-resume-progress" class="progress" data-plugin="progress" style="height:2px;">
                    <div class="progress-bar progress-bar-warning" role="progressbar"></div>
                </div>
<script type="text/javascript">
jQuery(function($){
    $('#file-user-resume').fileupload({
        type : 'POST',
        url: API_HOSTNAMES['data_api']+'/api/v1/users/'+Api.Params()['id']+'/resume',
        dataType: 'json',
        start: function (e, data) {
            $('#file-user-resume-progress .progress-bar').css('width', '0%');
        },
        done: function (e, data) {
            $('#file-user-resume-link').attr('href', data.result['data']['resumes'][0]['url']).show();
            $('#user-using-resume').val(window._sys['user']['name']+'\' resume: 【'+data.result['data']['resumes'][0]['url'].split('/').pop()+'】...');
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#file-user-resume-progress .progress-bar').css('width', progress + '%');
        },
        add: function (e, data) {
            var uploadErrors = [];
            var acceptFileTypes = /\/(pdf)$/i;
            if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
                uploadErrors.push('Resume file type error, pdf only.');
            }
            if (data.originalFiles[0]['size'] > 5*1024*1024) {
                uploadErrors.push('Resume file size error, 5MB max.');
            }
            if(uploadErrors.length > 0) {
                $.showError(uploadErrors.join("<br/>"), 400, function(){});
            } else {
                data.submit();
            }
        }
    });
});
</script>
            </div>
        </div>
        <button type="button" class="btn btn-primary" id="user-resume-preview" style="display: none;">Resume Preview</button>
        <!--<form id="resumeForm" autocomplete="off" novalidate="novalidate" class="fv-form fv-form-bootstrap"><button type="submit" class="fv-hidden-submit" style="display: none; width: 0px; height: 0px;"></button>
            <div class="col-sm-6 col-md-12">
                <div class="form-group">
                    <div class="input-group input-group-file">
                    <input type="text" class="form-control" readonly="" placeholder="pdf, jpg, word">
                    <span class="input-group-btn">
                      <span class="btn btn-success btn-file">
                        <i class="icon wb-upload" aria-hidden="true"></i>
                        <input type="file" name="" multiple="">
                      </span>
                    </span>
                    </div>
                </div>
            </div>
        </form>-->
    </div>
</div>        

<div class="panel">
    <div class="panel-heading">
        <h3 class="panel-title">Job Preference</h3>
        <div class="panel-actions">
            <div class="dropdown">
                <a class="panel-action" data-toggle="modal" data-target="#jobPerferenceModal" href="#" aria-expanded="false" title="Add">
                    <i class="icon wb-plus-circle" aria-hidden="true"></i>
                </a>
            </div>
        </div>
    </div>
    <div class="panel-body" style="max-height: 640px;overflow-y: auto;" id="user-job-preference-panel"></div>
</div>
    </div>
    <div class="basic-info-panel" id="recruiter-basic-info-panel">
<div class="panel">
    <div class="panel-heading">
        <h3 class="panel-title">Basic Info</h3>
        <div class="panel-actions">
            <div class="dropdown">
                <a class="panel-action" data-toggle="dropdown" href="#" aria-expanded="false" title="Edit" id="edit-user-basic-info">
                    <i class="icon wb-pencil" aria-hidden="true"></i>
                </a>
                <a class="panel-action" data-toggle="dropdown" href="#" aria-expanded="true" id="edit-user-basic-info-cancel" title="Cancel" style="display: none;">
                    <i class="icon wb-close" aria-hidden="true"></i>
                </a>
            </div>
        </div>
    </div>
    <form id="exampleFullForm" autocomplete="off" novalidate="novalidate" class="fv-form fv-form-bootstrap" style="padding: 0 30px;">
        <button type="submit" class="fv-hidden-submit" style="display: none; width: 0px; height: 0px;"></button>
        <div class="row row-lg">
            <div class="col-lg-6 form-horizontal">
                <div class="form-group">
                    <label class="col-sm-3 control-label">Job Title</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" name="job_title" id="recruiter-basic-job-title" disabled>
                        <input type="hidden"  name="job_title_id" >
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">Work Email</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" name="work_email" id="recruiter-basic-work-email" disabled>
                    </div>
                </div>
            </div>

            <div class="col-lg-6 form-horizontal">
                <div class="form-group">
                    <label class="col-sm-3 control-label">Company</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" name="company_name" id="recruiter-basic-company-name" disabled>
                        <input type="hidden"  name="company_id"  id="recruiter-basic-company-id">
                    </div>
                </div>
            </div>

            <div class="form-group col-lg-12 text-right padding-top-m" style="display: none;">
                <button type="submit" class="btn btn-primary" id="validateButton1">Submit</button>
            </div>
        </div>
    </form>
</div>
<div class="panel">
    <div class="panel-heading">
        <h3 class="panel-title">Verification</h3>
    </div>
    <div class="panel-body">
        <form id="exampleFullForm" autocomplete="off" novalidate="novalidate" class="fv-form fv-form-bootstrap">
            <button type="submit" class="fv-hidden-submit" style="display: none; width: 0px; height: 0px;"></button>
            <div class="row row-lg">
                <div class="col-lg-6 form-horizontal">
                    <div id="resumeForm-form-item" class="form-group " style="" >
                        <label for="resumeForm" class="control-label  none "></label>
                        <div>
                            <div class="input-group input-group-file" id="resumeForm" class="" style="" >
                                <input type="text" id="file-recruiter-verify-input" class="form-control" readonly="readonly" placeholder="">
                                <span class="input-group-btn">
                                    <a id="file-recruiter-verify-link" class="btn btn-info" target="verify" style="display:none;">
                                        <i class="icon wb-eye" aria-hidden="true"></i>
                                    </a>
                                    <span class="btn btn-success btn-file">
                                        <i class="icon wb-upload" aria-hidden="true"></i>
                                        <input type="file" id="file-recruiter-verify" name="document" readonly="readonly" />
                                    </span>
                                </span>
                            </div>
                            <div id="file-recruiter-verify-progress" class="progress" data-plugin="progress" style="height:2px;">
                                <div class="progress-bar progress-bar-warning" role="progressbar"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 form-horizontal" style="padding-top: 20px;">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Status</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" name="company" id="recruiter-verify-status" value="Unknown" style="border:none;width:60%;display: inline" readonly>
                            <button type="button" class="btn btn-primary" id="recruiter-verify-submit">VERIFY</button>
                        </div>
                    </div>
                </div>
                <div class="form-group col-lg-12 text-right padding-top-m" style="display: none;">
                    <button type="submit" class="btn btn-primary" id="validateButton1">Submit</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="panel">
    <div class="panel-heading">
        <h3 class="panel-title">Job Posts</h3>
        <div class="panel-actions">
            <div class="dropdown">
                <a class="panel-action" data-toggle="modal" data-target="#exampleFormModal" href="#" aria-expanded="false" title="Add">
                    <i class="icon wb-plus-circle" aria-hidden="true"></i>
                </a>
            </div>
        </div>
    </div>
    <div class="panel-body">
        <div class="list-table " style="">
            <table id="recruiter-post-jobs-table" border="0" cellpadding="6" cellspacing="1" class="table table-bordered" style="width: 100%;">
                <thead class="list-thead">
                <tr>
                    <td class="" style="text-align:center;white-space:nowrap;" width="100" code="job_title">
                        <span>Job Title</span>
                    </td>
                    <td class="" style="text-align:center;white-space:nowrap;" code="job_type">
                        <span>Job Type</span>
                    </td>
                    <td class="" style="text-align:center;white-space:nowrap;" code="salary">
                        <span>Salary</span>
                    </td>
                    <td class="" style="text-align:center;white-space:nowrap;" code="status">
                        <span>Status</span>
                    </td>
                    <td class="" style="text-align:center;white-space:nowrap;" code="creation_date">
                        <span>Creation Date</span>
                    </td>
                    <td class="nosort" style="text-align:center;white-space:nowrap;" width="100" code="">
                        <span>Action</span>
                    </td>
                </tr>
                </thead>
                <tbody class="list-tbody" id="recruiter-post-job-container"></tbody>
            </table>
        </div>
    </div>


    <div class="modal fade" id="exampleFormModal" aria-labelledby="exampleFormModalLabel" role="dialog" tabindex="-1" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-simple modal-center">
            <form class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="exampleFormModalLabel">Add Job Posts</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="form-group" style="height: 20px">
                            <label class="col-sm-3 control-label">Job Title</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="job_title">
                                <input type="hidden"  name="job_title_id">
                            </div>
                        </div>
                        <div class="form-group" style="height: 20px">
                            <label class="col-sm-3 control-label">Job Type</label>
                            <div class="col-sm-9">
                                <select class="form-control form-control-sm" name="job_types_key">
                                                                            <option value="full_time">Full-time</option>
                                                                            <option value="part_time">Part-time</option>
                                                                            <option value="contract">Contract</option>
                                                                            <option value="temp">Temp</option>
                                                                            <option value="internship">Internship</option>
                                                                    </select>
                            </div>
                        </div>
                        <div class="form-group" style="height: 20px">
                            <label class="col-sm-3 control-label">Salary From</label>
                            <div class="col-sm-9">
                                <div class="input-daterange">
                                    <div class="input-group col-sm-6">
                                        <input type="number" class="form-control" name="salary_start" min="10000" max="100000" step="1000">
                                    </div>
                                    <div class="input-group col-sm-6">
                                        <span class="input-group-addon">to</span>
                                        <input type="number" class="form-control" name="salary_end" min="10000" step="1000" max="200000">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group" style="height: 20px">
                            <label class="col-sm-3 control-label">Min Edu</label>
                            <div class="col-sm-9">
                                <select class="form-control form-control-sm" name="educations">
                                                                            <option value="diploma">Diploma</option>
                                                                            <option value="bachelor">Bachelor</option>
                                                                            <option value="master">Master</option>
                                                                            <option value="doctor">Doctor</option>
                                                                    </select>
                            </div>
                        </div>
                        <div class="form-group" style="height: 20px">
                            <label class="col-sm-3 control-label">Min Exp</label>
                            <div class="col-sm-9">
                                <select class="form-control form-control-sm" name="work_xps">
                                                                            <option value="fresh_graduate">Fresh Graduate</option>
                                                                            <option value="1_to_3_years">1 - 3 years</option>
                                                                            <option value="3_to_5_years">3 - 5 years</option>
                                                                            <option value="5_to_10_years">5 - 10 years</option>
                                                                            <option value="above_10_years">&gt; 10 years</option>
                                                                    </select>
                            </div>
                        </div>
                        <div class="form-group" style="height: 20px">
                            <label class="col-sm-3 control-label">Work Location</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="work_location" data-fv-notempty="true" data-fv-notempty-message="This is required" data-fv-field="work_location">
                                <small class="help-block" data-fv-validator="notEmpty" data-fv-for="requiredInput" data-fv-result="NOT_VALIDATED" style="display: none;">This is required</small></div>
                        </div>
                        <div class="form-group" style="height: 20px">
                            <label class="col-sm-3 control-label">Status</label>
                            <div class="col-sm-9">
                                <select class="form-control form-control-sm" name="status" >
                                                                            <option value="0">Closed</option>
                                                                            <option value="1">Active</option>
                                                                    </select>
                            </div>
                        </div>
                        <div class="form-group" style="height: 110px">
                            <label class="col-sm-3 control-label">Description</label>
                            <div class="col-sm-9">
                                <textarea class="maxlength-textarea form-control" data-plugin="maxlength"  name="description" rows="5" maxlength="1000"></textarea>
                            </div>
                        </div>


                        <div class="col-md-12 float-right">
                            <button class="btn btn-primary btn-outline" data-dismiss="modal" type="button">Submit</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>


    </div>
</div>        




   


<div class="panel" style="display: none;">
    <div class="panel-heading">
        <h3 class="panel-title">Tasks</h3>
        <!--<div class="panel-actions">
            <div class="dropdown">
                <a class="panel-action" data-toggle="modal" data-target="#tasksModal" href="#" aria-expanded="false" title="Add">
                    <i class="icon wb-plus-circle" aria-hidden="true"></i>
                </a>
            </div>
        </div>-->
    </div>
    <div class="panel-body">
        <div class="list-table" style="">
            <div class="panel" style="">
                <div class="panel-body">
                    <table id="task-data-table" border="0" cellpadding="6" cellspacing="1" class="table table-bordered" style="">
                        <thead class="list-thead">
                            <tr>
                                <td class="" style="text-align:center;white-space:nowrap;" width="100" code="taskid">
                                    <span>TaskID</span>
                                </td>
                                <td class="" style="text-align:center;white-space:nowrap;" code="description">
                                    <span>Description</span>
                                </td>
                                <td class="" style="text-align:center;white-space:nowrap;" code="reward">
                                    <span>Reward</span>
                                </td>
                                <td class="" style="text-align:center;white-space:nowrap;" code="status">
                                    <span>Status</span>
                                </td>
                                <td class="" style="text-align:center;white-space:nowrap;" code="reward_status">
                                    <span>Reward Status</span>
                                </td>
                            </tr>
                        </thead>
                        <tbody class="list-tbody"></tbody>
                    </table>
<script type="text/javascript">
$(document).ready(function() {
    var minwidth = 0;
    var isFixedColumns = minwidth > 0 && $('#task-data-table').width() < minwidth;
    // console.log($('#task-data-table').width(), isFixedColumns);
    var table = $('#task-data-table').DataTable({
        fixedHeader:    true,
        autoWidth: 		isFixedColumns,
        scrollCollapse: true,
        paging:         false,
        info: 			false,
        searching: 		false,
        scrollX:        true,
        order: 			[[0, '']],
        columnDefs: 	[
        {targets:'nosort', orderable:false, sSortAsc:false}
        ]
    }).on( 'order.dt', function () {
        var order = table.order()[0];
        var code  = $('thead td', this).eq(order[0]).attr('code');
        // console.log(code);
    });

    if (isFixedColumns) {
        new $.fn.dataTable.FixedColumns(table, {
            leftColumns: 1,
            rightColumns: 1
        });
    }
});
</script>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="panel" style="display: none;">
    <div class="panel-heading">
        <h3 class="panel-title">Restrictions</h3>
        <div class="panel-actions">
            <div class="dropdown">
                <a class="panel-action" data-toggle="dropdown" href="#" aria-expanded="false" title="Edit">
                    <i class="icon wb-pencil" aria-hidden="true"></i>
                </a>
            </div>
        </div>
    </div>
    <div class="panel-body">
        <form id="exampleFullForm" autocomplete="off" novalidate="novalidate" class="fv-form fv-form-bootstrap"><button type="submit" class="fv-hidden-submit" style="display: none; width: 0px; height: 0px;"></button>
            <div class="row row-lg">
                <div class="col-lg-6 form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Daily Chat Limit</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" name="daily_chat_limit" data-fv-notempty="true" data-fv-notempty-message="This is required" data-fv-field="daily_chat_limit">
                            <small class="help-block" data-fv-validator="notEmpty" data-fv-for="requiredInput" data-fv-result="NOT_VALIDATED" style="display: none;"></small>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Daily Send Resume Limit</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" name="daily_send_resume_limit" data-fv-notempty="true" data-fv-notempty-message="This is required" data-fv-field="daily_send_resume_limit">
                            <small class="help-block" data-fv-validator="notEmpty" data-fv-for="requiredInput" data-fv-result="NOT_VALIDATED" style="display: none;"></small>
                        </div>
                    </div>
                </div>
                <div class="form-group col-lg-12 text-right padding-top-m">
                    <button type="submit" class="btn btn-primary" id="validateButton1">Submit</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="panel" style="display: none;">
    <div class="panel-heading">
        <h3 class="panel-title">History</h3>
    </div>
    <div class="panel-body">
        <div class="list-table " style="">
            <div class="panel " style="">
                <div class="panel-body">
                    <table id="history-data-table" border="0" cellpadding="6" cellspacing="1" class="table table-bordered  " style="">
                        <thead class="list-thead">
                            <tr>
                                <td class="" style="text-align:center;white-space:nowrap;" width="100" code="item">
                                    <span>Item</span>
                                </td>
                                <td class="" style="text-align:center;white-space:nowrap;" code="change_from">
                                    <span>Change From</span>
                                </td>
                                <td class="" style="text-align:center;white-space:nowrap;" code="change_to">
                                    <span>Change To</span>
                                </td>
                                <td class="" style="text-align:center;white-space:nowrap;" code="done_by">
                                    <span>Done By</span>
                                </td>
                                <td class="" style="text-align:center;white-space:nowrap;" code="date">
                                    <span>Date</span>
                                </td>
                            </tr>
                        </thead>
                        <tbody class="list-tbody"></tbody>
                    </table>
<script type="text/javascript">
$(document).ready(function() {
    var minwidth = 0;
    var isFixedColumns = minwidth > 0 && $('#history-data-table').width() < minwidth;
    // console.log($('#history-data-table').width(), isFixedColumns);
    var table = $('#history-data-table').DataTable({
        fixedHeader:    true,
        autoWidth: 		isFixedColumns,
        scrollCollapse: true,
        paging:         false,
        info: 			false,
        searching: 		false,
        scrollX:        true,
        order: 			[[0, '']],
        columnDefs: 	[
        {targets:'nosort', orderable:false, sSortAsc:false}
        ]
    }).on( 'order.dt', function () {
        var order = table.order()[0];
        var code  = $('thead td', this).eq(order[0]).attr('code');
        // console.log(code);
    });

    if (isFixedColumns) {
        new $.fn.dataTable.FixedColumns(table, {
            leftColumns: 1,
            rightColumns: 1
        });
    }
});
</script>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="panel" style="display: none;">
    <div class="panel-heading">
        <h3 class="panel-title">Notes</h3>
        <div class="panel-actions">
            <div class="dropdown">
                <a class="panel-action" data-toggle="modal" data-target="#exampleFormModal" href="#" aria-expanded="false" title="Add">
                    <i class="icon wb-plus-circle" aria-hidden="true"></i>
                </a>
            </div>
        </div>
    </div>
    <div class="panel-body">
        <div class="list-table " style="">
            <div class="panel " style="">
                <div class="panel-body">
                    <table id="tabel201709201431374343580" border="0" cellpadding="6" cellspacing="1" class="table table-bordered  " style="">
                        <thead class="list-thead">
                            <tr>
                                <td class="" style="text-align:center;white-space:nowrap;" width="100" code="note">
                                    <span>Note</span>
                                </td>
                                <td class="" style="text-align:center;white-space:nowrap;" code="added_by">
                                    <span>Add By</span>
                                </td>
                                <td class="" style="text-align:center;white-space:nowrap;" code="date">
                                    <span>Date</span>
                                </td>
                                <td class="nosort" style="text-align:center;white-space:nowrap;" width="100" code="">
                                    <span>Action</span>
                                </td>
                            </tr>
                        </thead>
                        <tbody class="list-tbody"></tbody>
                    </table>
<script type="text/javascript">
$(document).ready(function() {
    var minwidth = 0;
    var isFixedColumns = minwidth > 0 && $('#tabel201709201431374343580').width() < minwidth;
    // console.log($('#tabel201709201431374343580').width(), isFixedColumns);
    var table = $('#tabel201709201431374343580').DataTable({
        fixedHeader:    true,
        autoWidth: 		isFixedColumns,
        scrollCollapse: true,
        paging:         false,
        info: 			false,
        searching: 		false,
        scrollX:        true,
        order: 			[[0, '']],
        columnDefs: 	[
        {targets:'nosort', orderable:false, sSortAsc:false}
        ]
    }).on( 'order.dt', function () {
        var order = table.order()[0];
        var code  = $('thead td', this).eq(order[0]).attr('code');
        // console.log(code);
    });

    if (isFixedColumns) {
        new $.fn.dataTable.FixedColumns(table, {
            leftColumns: 1,
            rightColumns: 1
        });
    }
});
</script>
                </div>
            </div>
        </div>
    </div>
</div>
    </div>
<link rel="stylesheet" type="text/css" href="/_resource/css/jquery-ui.css">
<script type="text/javascript" src="/_resource/js/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
    var uid = Api.Params()['id'], companyList = false, jobTitleList = false, schoolList = false, recruiterInfo = false;
    Date.prototype.pattern=function(fmt) {           
        var o = {           
            "M+" : this.getMonth()+1, //月份           
            "d+" : this.getDate(), //日           
            "h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12, //小时           
            "H+" : this.getHours(), //小时           
            "m+" : this.getMinutes(), //分           
            "s+" : this.getSeconds(), //秒           
            "q+" : Math.floor((this.getMonth()+3)/3), //季度           
            "S" : this.getMilliseconds() //毫秒           
        };           
        var week = {           
            "0" : "/u65e5",           
            "1" : "/u4e00",           
            "2" : "/u4e8c",           
            "3" : "/u4e09",           
            "4" : "/u56db",           
            "5" : "/u4e94",           
            "6" : "/u516d"          
        };           
        if(/(y+)/.test(fmt)){           
            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));           
        }           
        if(/(E+)/.test(fmt)){           
            fmt=fmt.replace(RegExp.$1, ((RegExp.$1.length>1) ? (RegExp.$1.length>2 ? "/u661f/u671f" : "/u5468") : "")+week[this.getDay()+""]);           
        }           
        for(var k in o){           
            if(new RegExp("("+ k +")").test(fmt)){           
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));           
            }           
        }           
        return fmt;           
    }       
    Api.Get('getUserInfo', {id:uid}, function(object, error){
        // console.log('User Detail Info:');
        // console.log(object);
        if(!error && object['message'] && object['status_code'] && object['message'] == 'OK' && object['status_code'] == 200){
            var user = object['data'];

            // 展示顶部的用户信息
            var userType = 0;
            if(user['roles'].length > 0){
                var isSeeker = false, isRecruiter = false;
                for(var i=0; i<user['roles'].length; ++i){
                    if(user['roles'][i]['name'] == 'job_seeker'){
                        isSeeker = true;
                    }
                    if(user['roles'][i]['name'] == 'recruiter'){
                        isRecruiter = true;
                    }
                }
                if(isSeeker && isRecruiter){
                    userType = 'job_seeker-recruiter';
                }
                if(isSeeker && !isRecruiter){
                    userType = 'job_seeker';
                }
                if(!isSeeker && isRecruiter){
                    userType = 'recruiter';
                }
            }
            displayUserTopInfo({
                avatar : user['avatar'].length > 0 ? user['avatar'] : false, 
                email : user['email'], 
                mobile : user['phone_num'], 
                userType : userType,
                firstName : user['first_name'],
                status : user['status_key'],
                lastName : user['last_name'],
                gender : user['gender'],
                birth : user['birthdate'],
                age : user['age'],
                password : user['uuid'],
            });
            displayUserBasicInfo({
                seeker : (userType == 'job_seeker' || userType == 'job_seeker-recruiter') ? {
                    experience : user['xp_lvl_key'],
                    employ : user['employment_status_key'],
                } : false,
                recruiter : (userType == 'recruiter' || userType == 'job_seeker-recruiter') ? {
                    experience : user['xp_lvl_key'],
                    employ : user['employment_status_key'],
                } : false,
            });
            displayWorkExperience(user['work_xps']);
            displayEducationExperience(user['educations']);
            displayResume(user['resumes']);
            displayJobPreference(user['preferences']);
            displayTasks();
            displayRestrictions();
            displayHistory();
            displayNotes();
            bindCreationPanelSubmitEvent();
        }
        Api.Get('getCompanyListForAutoComplete', {}, function(object, error){
            console.log('Company Auto Complete List: ');
            console.log(object);
            if(!error && object['message'] && object['status_code'] && object['message'] == 'OK' && object['status_code'] == 200){
                companyList = [];
                for(var i=0; i<object['data'].length; ++i){
                    companyList.push({
                        label : object['data'][i]['name'],
                        value : object['data'][i]['name'],
                        cid : object['data'][i]['id'],
                    });
                }
            }
            Api.Get('getJobTitleListForAutoComplete', {}, function(object, error){
                console.log('Job Title Auto Complete List: ');
                console.log(object);
                if(!error && object['message'] && object['status_code'] && object['message'] == 'OK' && object['status_code'] == 200){
                    jobTitleList = [];
                    for(var i=0; i<object['data'].length; ++i){
                        jobTitleList.push({
                            label : object['data'][i]['name'],
                            value : object['data'][i]['name'],
                            jtid : object['data'][i]['id'],
                        });
                    }
                }
                Api.Get('getSchoolList', {}, function(object, error){
                    console.log('School Auto Complete List: ');
                    console.log(object);
                    if(!error && object['message'] && object['status_code'] && object['message'] == 'OK' && object['status_code'] == 200){
                        schoolList = [];
                        for(var i=0; i<object['data'].length; ++i){
                            schoolList.push({
                                label : object['data'][i]['name'],
                                value : object['data'][i]['name'],
                                sid : object['data'][i]['id'],
                            });
                        }
                    }
                    if(userType == 'recruiter' || userType == 'job_seeker-recruiter'){
                        Api.Get('getRecruiterInfo', {ruid:Api.Params()['id']}, function(object, error){
                            console.log('Recruiter info:');
                            console.log(object);
                            if(!error && object['message'] && object['status_code'] && object['message'] == 'OK' && object['status_code'] == 200){
                                var recruiter = recruiterInfo = object['data'];
                                displayRecruiterBasicInfo({
                                    job_title : recruiter['recruiter_latest_work_xp']['job_title'],
                                    company_name : recruiter['recruiter_latest_work_xp']['company'],
                                    company_id : recruiter['recruiter_latest_work_xp']['company_id'],
                                    work_email : recruiter['contact_email'],
                                });
                                displayRecruiterVerify(recruiter['documents']);
                                displayRecruiterPostJob(recruiter['jobs']);
                            }
                        }, {ruid:true});
                    }
                });
            });
        });
    });

    function displayRecruiterPostJob(job){
        var template = `<tr>
            <td class="" style="text-align:center;white-space:nowrap;" width="100" code="job_title">{jobTitle}</td>
            <td class="" style="text-align:center;white-space:nowrap;" code="job_type">{jobType}</td>
            <td class="" style="text-align:center;white-space:nowrap;" code="salary">{jobSalary}</td>
            <td class="" style="text-align:center;white-space:nowrap;" code="status">{jobStatus}</td>
            <td class="" style="text-align:center;white-space:nowrap;" code="creation_date">{jobCreateDay}</td>
            <td class="nosort" style="text-align:center;white-space:nowrap;" width="100" code="">
                Action
            </td>
        </tr>`;
        var postJobHtml = '';
        for(var i=0; i<job.length; ++i){
            postJobHtml = postJobHtml + Api.render(template, {
                jobTitle : job[i]['job_title'],
                jobType : job[i]['job_type'],
                jobSalary : job[i]['salary_range_from'] + ' - ' + job[i]['salary_range_to'],
                jobStatus : job[i]['status_key'],
                jobCreateDay : job[i]['created_at'].split(' ')[0],
            });
        }
        $('#recruiter-post-job-container').html(postJobHtml);
        $(document).ready(function() {
            var minwidth = 0;
            var isFixedColumns = minwidth > 0 && $('#recruiter-post-jobs-table').width() < minwidth;
            var table = $('#recruiter-post-jobs-table').DataTable({
                fixedHeader:    true,
                autoWidth:    isFixedColumns,
                scrollCollapse: true,
                paging:         false,
                info:       false,
                searching:    false,
                scrollX:        true,
                order:      [[0, '']],
                columnDefs:   [
                {targets:'nosort', orderable:false, sSortAsc:false}
                ]
            }).on( 'order.dt', function () {
                var order = table.order()[0];
                var code  = $('thead td', this).eq(order[0]).attr('code');
                // console.log(code);
            });
            if (isFixedColumns) {
                new $.fn.dataTable.FixedColumns(table, {
                    leftColumns: 1,
                    rightColumns: 1
                });
            }
        });
    }
  
    function displayRecruiterBasicInfo(data){
        $('#recruiter-basic-company-id').val(data['company_id']);
        $('#recruiter-basic-company-name').val(data['company_name']);
        $('#recruiter-basic-job-title').val(data['job_title']);
        $('#recruiter-basic-work-email').val(data['work_email']);
    }
    function displayRecruiterVerify(verify){
        if(verify){
            $('#file-recruiter-verify-link').attr('href', verify['url']).show();
            $('#file-recruiter-verify-input').val('Recruiter\'s Verify Document: 【'+verify['url'].split('/').pop()+'】...');
            $('#recruiter-verify-status').val(verify['is_verify'] ? 'Verified' : 'Not Verified');
            if(verify['is_verify']){
                $('#recruiter-verify-submit').css('display', 'none');
            }
        }
        jQuery(function($){
            $('#file-recruiter-verify').fileupload({
                type : 'POST',
                url: API_HOSTNAMES['data_api']+'/api/v1/recruiters/'+Api.Params()['id']+'/documents',
                dataType: 'json',
                formData:{company_id:verify['company_id']},
                start: function (e, data) {
                    $('#file-recruiter-verify-progress .progress-bar').css('width', '0%');
                },
                done: function (e, data) {
                    $('#file-recruiter-verify-input').val('Recruiter\'s Verify Document: 【'+data.result.data.url.split('/').pop()+'】...');
                    $('#file-recruiter-verify-link').attr('href', data.result.data.url).show();
                },
                progressall: function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    $('#file-recruiter-verify-progress .progress-bar').css('width', progress + '%');
                },
                add: function (e, data) {
                    // var uploadErrors = [];
                    // var acceptFileTypes = /\/(pdf)$/i;
                    // if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
                    //     uploadErrors.push('Resume file type error, pdf only.');
                    // }
                    // if (data.originalFiles[0]['size'] > 5*1024*1024) {
                    //     uploadErrors.push('Resume file size error, 5MB max.');
                    // }
                    // if(uploadErrors.length > 0) {
                    //     $.showError(uploadErrors.join("<br/>"), 400, function(){});
                    // } else {
                    //     data.submit();
                    // }
                    // data.company_id = verify['company_id'];
                    data.submit();
                }
            });
        });
    }
    function displayUserTopInfo(info){
        if(info['avatar']){
            $('#user-top-info-avatar').attr('src', info['avatar']);
        }
        $('#user-top-info-email').val(info['email']);
        $('#user-top-info-mobile').val(info['mobile']);
        $('#user-top-info-usertype option[value="'+info['userType']+'"]').attr('selected', 'selected');
        $('#user-top-info-firstname').val(info['firstName']);
        $('#user-top-info-userstatus option[value="'+info['status']+'"]').attr('selected', 'selected');
        $('#user-top-info-lastname').val(info['lastName']);
        $('#user-top-info-gender option[value="'+info['gender']+'"]').attr('selected', 'selected');
        $('#user-top-info-birthdate').val(info['birth']);
        $('#user-top-info-age').val(info['age']);
        $('#user-top-info-password').val(info['password']);
        // 编辑
        $('#edit-user-top-info').click(function(){
            $('#edit-user-top-info-cancel').css('display', 'inline-block');
            // $('#user-top-info-email, #user-top-info-mobile, #user-top-info-usertype, #user-top-info-firstname, #user-top-info-userstatus, #user-top-info-lastname, #user-top-info-gender, #user-top-info-birthdate, #user-top-info-age, #user-top-info-password').removeAttr('disabled');
            $('#user-top-info-firstname, #user-top-info-lastname, #user-top-info-gender, #user-top-info-age').removeAttr('disabled');
            $('#edit-user-top-info-submit').css('display', 'inline-block');
            return false;
        });
        // 取消编辑
        $('#edit-user-top-info-cancel').click(function(){
            $(this).css('display', 'none');
            // $('#user-top-info-email, #user-top-info-mobile, #user-top-info-usertype, #user-top-info-firstname, #user-top-info-userstatus, #user-top-info-lastname, #user-top-info-gender, #user-top-info-birthdate, #user-top-info-age, #user-top-info-password').attr('disabled', 'disabled');
            $('#user-top-info-firstname, #user-top-info-lastname, #user-top-info-gender, #user-top-info-age').attr('disabled', 'disabled');
            $('#edit-user-top-info-submit').css('display', 'none');
            return false;
        });
        // 编辑提交
        $('#edit-user-top-info-submit').click(function(){
            // var email = $('#user-top-info-email').val(),
                // mobile = $('#user-top-info-mobile').val(info['mobile']),
                // userType = $('#user-top-info-usertype').val(),
            var firstName = $('#user-top-info-firstname').val(),
                // userStatus = $('#user-top-info-userstatus').val(),
                lastName = $('#user-top-info-lastname').val(),
                gender = $('#user-top-info-gender').val(),
                // birthDate = $('#user-top-info-birthdate').val(),
                age = $('#user-top-info-age').val();
                // password = $('#user-top-info-password').val(),
                // country_code = '000000',
                // address = '',
                // postal_code = '000000'.
                // countryKey = '',
                // regionKey = '',
                // locationKey = '',
                // website = '',
                // description = '',
                // xpLvlKey = '',
                // employmentStatusKey = '';
            var userData = {
                uid : uid,
                first_name : firstName,
                last_name : lastName,
                gender : gender,
                age : age,
                // country_code : countryCode,
                // address : address,
                // postal_code : postalCode,
                // country_key : countryKey,
                // region_key : regionKey,
                // location_key : locationKey,
                // website : website,
                // description : description,
                // xp_lvl_key : xpLvlKey,
                // employment_status_key : employmentStatusKey,
            };
            // // console.log(userData);
            Api.Put('updateUserTopInfo', userData, function(object, error){
                if(!error && object['status_code'] && object['status_code'] == 200 && object['message'] && object['message'] == 'OK'){
                    $.showSuccess('Update user info successfully.', 400, function(){
                        window.location.reload();
                    });
                }else{
                    $.showError('Something error, retry later.', 300);
                }
            }, {uid:true});
            return false;
        });
    }

    function displayUserBasicInfo(info){
        var seekerInfo = info['seeker'], recruiterInfo = info['recruiter'];
        if(seekerInfo){
            $('.nav-item[data-usertype="seeker"]').css('display', 'inline-block');
            // $('#seeker-basic-info-panel').hasClass('basic-info-panel-active').css('display', 'block');、
            $('#user-basic-info-seeker-experience option[value="'+seekerInfo['experience']+'"]').attr('selected', 'selected');
            $('#user-basic-info-seeker-employstatus option[value="'+seekerInfo['employ']+'"]').attr('selected', 'selected');
        }
        if(recruiterInfo){
            $('.nav-item[data-usertype="recruiter"]').css('display', 'inline-block');
            // $('#recruiter-basic-info-panel').css('display', 'block');
            $('#user-basic-info-recruiter-experience option[value="'+recruiterInfo['experience']+'"]').attr('selected', 'selected');
            $('#user-basic-info-recruiter-employstatus option[value="'+recruiterInfo['employ']+'"]').attr('selected', 'selected');
        }

        // edit user basic info
        $('#edit-user-basic-info').click(function(){
            var panelId = $('.basic-info-panel-active').attr('id');
            // update user seeler basic info
            if(panelId == 'seeker-basic-info-panel'){
                $('#user-basic-info-seeker-experience, #user-basic-info-seeker-employstatus').removeAttr('disabled');
                $('#edit-user-seeker-basic-submit').parent().css('display', 'block');
            }
            // update user recruiter basic info
            if(panelId == 'recruiter-basic-info-panel'){
                $('#user-basic-info-recruiter-experience, #user-basic-info-recruiter-employstatus').removeAttr('disabled');
                $('#edit-user-recruiter-basic-submit').parent().css('display', 'block');
            }
            $('#edit-user-basic-info-cancel').css('display', 'inline-block');
        });

        // edit user basic info cancel
        $('#edit-user-basic-info-cancel').click(function(){
            var panelId = $('.basic-info-panel-active').attr('id');
            // update user seeler basic info
            if(panelId == 'seeker-basic-info-panel'){
                $('#user-basic-info-seeker-experience, #user-basic-info-seeker-employstatus').attr('disabled', 'disabled');
                $('#edit-user-seeker-basic-submit').parent().css('display', 'none');
            }
            // update user recruiter basic info
            if(panelId == 'recruiter-basic-info-panel'){
                $('#user-basic-info-recruiter-experience, #user-basic-info-recruiter-employstatus').attr('disabled', 'disabled');
                $('#edit-user-recruiter-basic-submit').parent().css('display', 'none');
            }
            $('#edit-user-basic-info-cancel').css('display', 'none');
        });

        $('#edit-user-seeker-basic-submit').click(function(){
            var seekerExperience = $('#user-basic-info-seeker-experience').val();
            var seekerEmployStatus = $('#user-basic-info-seeker-employstatus').val();
            var userData = {
                uid : uid,
                employment_status_key : seekerEmployStatus,
                xp_lvl_key :seekerExperience,
            };
            Api.Put('updateUserTopInfo', userData, function(object, error){
                if(!error && object['status_code'] && object['status_code'] == 200 && object['message'] && object['message'] == 'OK'){
                    $.showSuccess('Update user basic info successfully.', 400, function(){
                        window.location.reload();
                    });
                }else{
                    $.showError('Something error, retry later.', 300);
                }
            }, {uid : true});
        });
        $('#edit-user-recruiter-basic-submit').click(function(){
            var recruiterExperience = $('#user-basic-info-recruiter-experience').val();
            var recruiterEmployStatus = $('#user-basic-info-recruiter-employstatus').val();
            var userData = {
                uid : uid,
                employment_status_key : recruiterEmployStatus,
                xp_lvl_key : recruiterExperience,
            };
            Api.Put('updateUserTopInfo', userData, function(object, error){
                if(!error && object['status_code'] && object['status_code'] == 200 && object['message'] && object['message'] == 'OK'){
                    $.showSuccess('Update user basic info successfully.', 400, function(){
                        window.location.reload();
                    });
                }else{
                    $.showError('Something error, retry later.', 300);
                }
            }, {uid : true});
        });
    }

    function displayWorkExperience(works){
        
        var workExperienceHtml = '';
        for(var i=works.length-1; i>=0; --i){
            workExperienceHtml = workExperienceHtml + Api.render(`
            <div class="panel-heading user-work-experience-item" data-workid="{workId}">
                <h3 class="panel-title"></h3>
                <div class="panel-actions">
                    <div class="dropdown">
                        <a class="panel-action user-work-experience-edit" data-toggle="dropdown" href="#" data-workid="{workId}" aria-expanded="false" title="Edit">
                            <i class="icon wb-pencil" aria-hidden="true"></i>
                        </a>
                        <a class="panel-action user-work-experience-delete" data-toggle="modal" data-target="#exampleNiftyFadeScale" href="#" data-workid="{workId}" aria-expanded="false" title="Delete">
                            <i class="icon wb-trash" aria-hidden="true"></i>
                        </a>
                        <a class="panel-action user-work-experience-edit-cancel" data-toggle="dropdown" href="#" data-workid="{workId}" aria-expanded="false" title="Cancel">
                            <i class="icon wb-close" aria-hidden="true" style="display:none;"></i>
                        </a>
                    </div>
                </div>
            </div>
            <form id="exampleFullForm" autocomplete="off" novalidate="novalidate" class="fv-form fv-form-bootstrap user-work-experience-item" data-workid="{workId}">
                <button type="submit" class="fv-hidden-submit" style="display: none; width: 0px; height: 0px;"></button>
                <div class="row row-lg">
                    <div class="col-lg-6 form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">Job Title</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control user-work-job-title" name="job_title" data-workid="{workId}" value="{jobTitle}" disabled="disabled">
                                <input type="hidden" name="job_title_id" class="user-work-job-title-id" data-workid="{workId}" value="{jobTitleId}" disabled="disabled">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">Company Name</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control user-work-company-name" name="company_name" data-workid="{workId}" value="{companyName}" disabled="disabled">
                                <input type="hidden" name="company_id" class="user-work-company-id" value="{companyId}" data-workid="{workId}" disabled="disabled">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">Description</label>
                            <div class="col-sm-9">
                                <textarea class="form-control user-work-job-description" name="description" data-workid="{workId}" rows="5" disabled="disabled" maxlength="700">{jobDescription}</textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label"></label>
                            <div class="col-sm-9">
                                <div class="checkbox-custom checkbox-primary">
                                    <input type="checkbox" name="block" class="user-work-company-block" data-workid="{workId}" value="block" {blockChecked} disabled="disabled">
                                    <label for="block">Block all recruiters from this company</label>
                                </div>
                            </div>
                            <label class="col-sm-3 control-label"></label>
                            <div class="col-sm-9">
                                <div class="checkbox-custom checkbox-primary">
                                    <input type="checkbox" name="here" class="user-work-company-currently-here" data-workid="{workId}" value="block" {hereChecked} disabled="disabled">
                                    <label for="block">Currently work here</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6 form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">From</label>
                            <div class="col-sm-9">
                                <div class="input-daterange" data-plugin="datepicker">
                                    <div class="input-group col-sm-6">
                                        <span class="input-group-addon">
                                            <i class="icon wb-calendar" aria-hidden="true"></i>
                                        </span>
                                        <input type="text" class="form-control user-work-period-start" name="start" data-workid="{workId}" value="{periodFrom}" disabled="disabled">
                                    </div>
                                    <div class="input-group col-sm-6">
                                        <span class="input-group-addon">to</span>
                                        <input type="text" class="form-control user-work-period-end" name="end" data-workid="{workId}" value="{periodTo}" disabled="disabled">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">Location</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control user-work-company-location" name="company_location" data-workid="{workId}" value="{companyLocation}" disabled="disabled">
                            </div>
                        </div>
                    </div>

                    <div class="form-group col-lg-12 text-right padding-top-m">
                        <button type="button" class="btn btn-primary  user-work-experience-edit-submit" data-workid="{workId}" style="display:none;">Submit</button>
                    </div>
                </div>
            </form>
            `,
            {
                workId : works[i]['id'],
                jobTitle : works[i]['job_title'],
                jobTitleId : works[i]['job_title_id'], 
                jobDescription : works[i]['description'] ? works[i]['description'] : '',
                blockChecked : works[i]['is_company_blacklisted'] ? 'checked="checked"' : '',
                hereChecked : works[i]['is_currently_work_here'] ? 'checked="checked"' : '',
                periodFrom : works[i]['working_period_from'],
                periodTo : works[i]['working_period_to'] && works[i]['working_period_to'] != '0000-00-00' ? works[i]['working_period_to'] : 'now', 
                companyName : works[i]['company'],
                companyId : works[i]['company_id'],
                companyLocation : 'Unknown',
            });
        }
        $('#user-work-experience-panel').html(workExperienceHtml);
        var startDate = false, endDate = false;
        $('.user-work-period-end').datepicker({format: 'yyyy-mm-dd'}).on('changeDate', function(e){
            var workId = $(this).data('workid');
            var date = e.date.pattern('yyyy-MM-dd');
            endDate = date;
        });
        $('.user-work-period-start').datepicker({format: 'yyyy-mm-dd'}).on('changeDate', function(e){
            var workId = $(this).data('workid');
            var date = e.date.pattern('yyyy-MM-dd');
            startDate = date;
        });
        var companyNameAutoComplete = setInterval(function(){
            // console.log('Waiting for data to finish [Company Name Auto Complete] ...');
            if(companyList){
                $('.user-work-company-name').autocomplete({
                    source: companyList,
                    select: function( event, ui ) {
                        $('.user-work-company-id[data-workid="'+$(this).data('workid')+'"]').val(ui.item.cid);
                    }
                });
                $('#awe-company-name').autocomplete({
                    source: companyList,
                    select: function( event, ui ) {
                        $('#awe-company-id').val(ui.item.cid);
                    }
                });
                clearInterval(companyNameAutoComplete);
            }
        }, 400);
        var jobTitleAutoComplete = setInterval(function(){
            // console.log('Waiting for data to finish [Job Title Auto Complete] ...');
            if(jobTitleList){
                $('.user-work-job-title').autocomplete({
                    source: jobTitleList,
                    select: function( event, ui ) {
                        $('.user-work-job-title-id[data-workid="'+$(this).data('workid')+'"]').val(ui.item.jtid);
                    }
                });
                $('#awe-job-title').autocomplete({
                    source: jobTitleList,
                    select: function( event, ui ) {
                        $('#awe-job-title-id').val(ui.item.jtid);
                    }
                });
                clearInterval(jobTitleAutoComplete);
            }
        }, 400);
        $('.user-work-experience-delete').click(function(){
            var workId = $(this).data('workid');
            var deleteConfirm = window.confirm('Are you sure to elete this work experience?');
            if(deleteConfirm){
                Api.Delete('deleteUserWorkExperience', {uid:uid,workId:workId}, function(object, error){
                    if(!error && object['status_code'] && object['status_code'] == 200 && object['message'] && object['message'] == 'OK'){
                        $('.user-work-experience-item[data-workid="'+workId+'"]').remove();
                        $.showSuccess('Delete user work experience successfully.', 400);
                    }else{
                        $.showError('Something error, retry later.', 300);
                    }
                });
            }
            return false;
        });
        $('.user-work-experience-edit').click(function(){
            var workId = $(this).data('workid');
            $('.user-work-experience-edit-cancel[data-workid="'+workId+'"]>i').css('display', 'inline-block');
            $('.user-work-experience-edit-submit[data-workid="'+workId+'"]').css('display', 'inline-block');
            $('.user-work-company-id[data-workid="'+workId+'"], .user-work-company-name[data-workid="'+workId+'"], .user-work-period-end[data-workid="'+workId+'"], .user-work-period-start[data-workid="'+workId+'"], .user-work-company-block[data-workid="'+workId+'"], .user-work-job-title[data-workid="'+workId+'"], .user-work-job-title-id[data-workid="'+workId+'"], .user-work-job-description[data-workid="'+workId+'"], .user-work-company-currently-here[data-workid="'+workId+'"], .user-work-company-location[data-workid="'+workId+'"]').removeAttr('disabled');
            startDate = $('.user-work-period-start[data-workid="'+workId+'"]').val();
            endDate = $('.user-work-period-end[data-workid="'+workId+'"]').val();
            return false;
        });
        $('.user-work-experience-edit-cancel').click(function(){
            var workId = $(this).data('workid');
            $('.user-work-experience-edit-cancel[data-workid="'+workId+'"]>i').css('display', 'none');
            $('.user-work-experience-edit-submit[data-workid="'+workId+'"]').css('display', 'none');
            $('.user-work-company-id[data-workid="'+workId+'"], .user-work-company-name[data-workid="'+workId+'"], .user-work-period-end[data-workid="'+workId+'"], .user-work-period-start[data-workid="'+workId+'"], .user-work-company-block[data-workid="'+workId+'"], .user-work-job-title[data-workid="'+workId+'"], .user-work-job-title-id[data-workid="'+workId+'"], .user-work-job-description[data-workid="'+workId+'"], .user-work-company-currently-here[data-workid="'+workId+'"], .user-work-company-location[data-workid="'+workId+'"]').attr('disabled', 'disabled');
            startDate = false;
            endDate = false;
            return false;
        });
        $('.user-work-experience-edit-submit').click(function(){
            var workId = $(this).data('workid');
            if($('.user-work-company-currently-here[data-workid="'+workId+'"]').is(':checked')){
                endDate = 'now';
            }
            if(!startDate){
                $.showError('Work experience start date can not be empty.', 300);
                return false;
            }
            if(!endDate){
                $.showError('Work experience end date can not be empty.', 300);
                return false;
            }
            if(endDate < startDate){
                $.showError('Work experience end date can not less than start date.', 400);
                return false;
            }
            var work = {
                uid : uid,
                workId : workId,
                id : workId,
                company_id : $('.user-work-company-id[data-workid="'+workId+'"]').val(),
                company : $('.user-work-company-name[data-workid="'+workId+'"]').val(),
                job_title_id : $('.user-work-job-title-id[data-workid="'+workId+'"]').val(),
                job_title : $('.user-work-job-title[data-workid="'+workId+'"]').val(),
                working_period_from : startDate,
                working_period_to : endDate,
                is_currently_work_here : $('.user-work-company-currently-here[data-workid="'+workId+'"]').is(':checked') ? 1 : 0,
                is_company_blacklisted : $('.user-work-company-block[data-workid="'+workId+'"]').is(':checked') ? 1 : 0,
                description : $('.user-work-job-description[data-workid="'+workId+'"]').val(),
                // location : $('.user-work-company-location[data-workid="'+workId+'"]').val(),
            };
            if(work['is_currently_work_here']){
                work['working_period_to'] = 'now';
            }
            Api.Put('updateUserWorkExperience', work, function(object, error){
                // console.log(object);
                if(!error && object['message'] && object['status_code'] && object['message'] == 'OK' && object['status_code'] == 200){
                    $.showSuccess('Update user\'s work experience successfully.', 400, function(){
                        window.location.reload();
                    });
                }else{
                  $.showError('Something error, retry later.', 300);
                }
            }, {workId:true,uid:true});
            startDate = false;
            endDate = false;
            return false;
        });
    }

    function displayEducationExperience(educations){
        var userEducationHtml = '';
        for(var i=educations.length-1; i>=0; --i){
            userEducationHtml = userEducationHtml + Api.render(`
                <div class="panel-heading user-education-item" data-educationid="{educationId}">
                    <h3 class="panel-title"></h3>
                    <div class="panel-actions">
                        <div class="dropdown">
                            <a class="panel-action user-edu-exp-edit" data-toggle="dropdown" href="#" data-educationid="{educationId}" aria-expanded="false" title="Edit">
                                <i class="icon wb-pencil" aria-hidden="true"></i>
                            </a>
                            <a class="panel-action user-education-delete" data-toggle="modal" data-target="#exampleNiftyFadeScale" href="#" data-educationid="{educationId}" aria-expanded="false" title="Delete">
                                <i class="icon wb-trash" aria-hidden="true"></i>
                            </a>
                            <a class="panel-action user-edu-exp-edit-cancel" data-toggle="dropdown" href="#" data-educationid="{educationId}" aria-expanded="false" title="Cancel" style="display:none;">
                                <i class="icon wb-close" aria-hidden="true"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="panel-body user-education-item" data-educationid="{educationId}">
                    <form id="exampleFullForm" autocomplete="off" novalidate="novalidate" class="fv-form fv-form-bootstrap">
                        <button type="submit" class="fv-hidden-submit" style="display: none; width: 0px; height: 0px;"></button>
                        <div class="row row-lg">
                            <div class="col-lg-6 form-horizontal">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">School</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control user-edu-exp-school-name" data-educationid="{educationId}" name="school" value="{eduSchool}" disabled="disabled">
                                        <input type="text" name="school_id" class="user-edu-exp-school-id" data-educationid="{educationId}" value="{eduSchoolId}" style="display:none;" disabled="disabled">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">Degree</label>
                                    <div class="col-sm-9">
                                        <select class="form-control form-control-sm user-edu-exp-degree" name="degree_key" disabled="disabled" data-educationid="{educationId}">
                                            <option value="diploma" {dipSelected}>Diploma</option>
                                            <option value="bachelor" {bacSelected}>Bachelor</option>
                                            <option value="master" {masSelected}>Master</option>
                                            <option value="doctor" {docSelected}>Doctor</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">Field of Study</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control user-edu-exp-field" name="field_of_study" value="{fieldStudy}" disabled="disabled" data-educationid="{educationId}">
                                    </div>
                                </div>

                            </div>

                            <div class="col-lg-6 form-horizontal">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">From</label>
                                    <div class="col-sm-9">
                                        <div class="input-daterange">
                                            <div class="input-group col-sm-6">
                                                  <span class="input-group-addon">
                                                    <i class="icon wb-calendar" aria-hidden="true"></i>
                                                  </span>
                                                <input type="text" class="form-control user-edu-exp-start" name="start" value="{periodFrom}" disabled="disabled" data-educationid="{educationId}">
                                            </div>
                                            <div class="input-group col-sm-6">
                                                <span class="input-group-addon">to</span>
                                                <input type="text" class="form-control user-edu-exp-end" name="end" value="{periodTo}" disabled="disabled" data-educationid="{educationId}">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">Grade</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control user-edu-exp-grade" name="grade" value="{grade}" disabled="disabled" data-educationid="{educationId}">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">Description</label>
                                    <div class="col-sm-9">
                                        <textarea class="maxlength-textarea form-control user-edu-exp-description" data-educationid="{educationId}" data-plugin="maxlength" name="description" rows="5" maxlength="300" disabled="disabled">{description}</textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group col-lg-12 text-right padding-top-m" style="display: none">
                                <button type="button" class="btn btn-primary  user-edu-exp-submit" id="validateButton1" data-educationid="{educationId}">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            `,
            {
                educationId : educations[i]['id'],
                eduSchool : educations[i]['school'],
                eduSchoolId : educations[i]['school_id'],
                dipSelected : educations[i]['degree_key'] == 'diploma' ? 'selected="selected"' : '',
                bacSelected : educations[i]['degree_key'] == 'bachelor' ? 'selected="selected"' : '',
                masSelected : educations[i]['degree_key'] == 'master' ? 'selected="selected"' : '',
                docSelected : educations[i]['degree_key'] == 'doctor' ? 'selected="selected"' : '',
                fieldStudy : educations[i]['field_of_study'],
                periodFrom : educations[i]['study_period_from'],
                periodTo : educations[i]['study_period_to'] ? educations[i]['study_period_to'] : '至今', 
                grade : educations[i]['grade'],
                description : educations[i]['description'] ? educations[i]['description'] : '',
            });
        }
        $('#user-education-experience-panel').html(userEducationHtml);
        $('#add-edu-start').datepicker({format: 'yyyy-mm-dd'});
        $('.user-edu-exp-start').datepicker({format: 'yyyy-mm-dd'});
        $('#add-edu-end').datepicker({format: 'yyyy-mm-dd'});
        $('.user-edu-exp-end').datepicker({format: 'yyyy-mm-dd'});
        
        var schoolListAutoComplete = setInterval(function(){
            // console.log('Waiting for data to finish [School Name Auto Complete] ...');
            if(schoolList){
                $('.user-edu-exp-school-name').autocomplete({
                    source: schoolList,
                    select: function( event, ui ) {
                        $('.user-edu-exp-school-id[data-educationid="'+$(this).data('educationid')+'"]').val(ui.item.sid);
                    }
                });
                $('#add-edu-school-name').autocomplete({
                    source: schoolList,
                    select: function( event, ui ) {
                        $('#add-edu-school-id').val(ui.item.sid);
                    }
                });
                clearInterval(schoolListAutoComplete);
            }
        }, 400);
        $('.user-education-delete').click(function(){
            var educationId = $(this).data('educationid');
            var deleteConfirm = window.confirm('Are you sure to elete this education experience?');
            if(deleteConfirm){
                Api.Delete('deleteUserEducationExperience', {uid:uid,eduId:educationId}, function(object, error){
                    if(!error && object['status_code'] && object['status_code'] == 200 && object['message'] && object['message'] == 'OK'){
                        $('.user-education-item[data-educationid="'+educationId+'"]').remove();
                        $.showSuccess('Delete user education experience successfully.', 400);
                    }else{
                        $.showError('Something error, retry later.', 300);
                    }
                });
            }
            return false;
        });
        $('.user-edu-exp-edit').click(function(){
            var eduId = $(this).data('educationid');
            $('.user-edu-exp-edit-cancel[data-educationid="'+eduId+'"]').css('display', 'inline-block');
            $('.user-edu-exp-school-name[data-educationid="'+eduId+'"]').removeAttr('disabled');
            $('.user-edu-exp-school-id[data-educationid="'+eduId+'"]').removeAttr('disabled');
            $('.user-edu-exp-degree[data-educationid="'+eduId+'"]').removeAttr('disabled');
            $('.user-edu-exp-field[data-educationid="'+eduId+'"]').removeAttr('disabled');
            $('.user-edu-exp-start[data-educationid="'+eduId+'"]').removeAttr('disabled');
            $('.user-edu-exp-end[data-educationid="'+eduId+'"]').removeAttr('disabled');
            $('.user-edu-exp-grade[data-educationid="'+eduId+'"]').removeAttr('disabled');
            $('.user-edu-exp-description[data-educationid="'+eduId+'"]').removeAttr('disabled');
            $('.user-edu-exp-submit[data-educationid="'+eduId+'"]').parent().css('display', 'inline-block');
            return false;
        });
        $('.user-edu-exp-edit-cancel').click(function(){
            var eduId = $(this).data('educationid');
            $('.user-edu-exp-edit-cancel[data-educationid="'+eduId+'"]').css('display', 'none');
            $('.user-edu-exp-school-name[data-educationid="'+eduId+'"]').attr('disabled', 'disabled');
            $('.user-edu-exp-school-id[data-educationid="'+eduId+'"]').attr('disabled', 'disabled');
            $('.user-edu-exp-degree[data-educationid="'+eduId+'"]').attr('disabled', 'disabled');
            $('.user-edu-exp-field[data-educationid="'+eduId+'"]').attr('disabled', 'disabled');
            $('.user-edu-exp-start[data-educationid="'+eduId+'"]').attr('disabled', 'disabled');
            $('.user-edu-exp-end[data-educationid="'+eduId+'"]').attr('disabled', 'disabled');
            $('.user-edu-exp-grade[data-educationid="'+eduId+'"]').attr('disabled', 'disabled');
            $('.user-edu-exp-description[data-educationid="'+eduId+'"]').attr('disabled', 'disabled');
            $('.user-edu-exp-submit[data-educationid="'+eduId+'"]').parent().css('display', 'none');
            return false;
        });
        $('.user-edu-exp-school-name').keyup(function(e){
            var eduId = $(this).data('educationid');
            if(e.which != 13){
                $('.user-edu-exp-school-id[data-educationid="'+eduId+'"]').val(0);
            }
        });
        $('.user-edu-exp-submit').click(function(){
            var eduId = $(this).data('educationid');
            var schoolName = $('.user-edu-exp-school-name[data-educationid="'+eduId+'"]').val(),
                schoolId = parseInt($('.user-edu-exp-school-id[data-educationid="'+eduId+'"]').val()),
                degree = $('.user-edu-exp-degree[data-educationid="'+eduId+'"]').val(),
                field = $('.user-edu-exp-field[data-educationid="'+eduId+'"]').val(),
                from = $('.user-edu-exp-start[data-educationid="'+eduId+'"]').val(),
                to = $('.user-edu-exp-end[data-educationid="'+eduId+'"]').val(),
                grade = $('.user-edu-exp-grade[data-educationid="'+eduId+'"]').val().trim(),
                description = $('.user-edu-exp-description[data-educationid="'+eduId+'"]').val();
            if(schoolName.length == 0 || isNaN(schoolId) || schoolId == 0){
                $.showError('School info can not be empty.', 400);
                return false;
            }
            if(degree != 'diploma' && degree != 'bachelor' && degree != 'master' && degree != 'doctor'){
                $.showError('Education degree is wrong.', 400);
                return false;
            }
            if(grade.length == 0){
                $.showError('Education grade is wrong.', 400);
                return false;
            }
            if(from.length == 0 || to.length == 0 || from > to){
                $.showError('Education period is wrong.', 400);
                return false;
            }
            if(field.length == 0){
                $.showError('Education field can not be empty.', 400);
                return false;
            }
            if(description.length == 0){
                $.showError('Education description can not be empty.', 400);
                return false;
            }
            var eduData = {
                uid : uid,
                eduId : eduId,
                school_id : schoolId,
                school : schoolName,
                degree_key : degree,
                field_of_study : field,
                grade : grade,
                description : description,
                study_period_from : from,
                study_period_to : to,
            };
            // console.log(eduData);
            Api.Put('updateEduExperience', eduData, function(object, error){
                // console.log(object);
                if(!error && object['status_code'] && object['status_code'] == 200 && object['message'] && object['message'] == 'OK'){
                    $.showSuccess('Update user education experience successfully.', 400, function(){
                        window.location.reload();
                    });
                }else{
                    $.showError('Something error, retry later.', 300);
                }
            }, {uid : true, eduId : true});
            return false;
        });
    }
    function displayResume(resumes){
        if(resumes.length > 0){
            $('#user-using-resume').val(window._sys['user']['name']+'\' resume: 【'+resumes[0]['url'].split('/').pop()+'】...');
            $('#file-user-resume-link').attr('href', resumes[0]['url']).show();
        }
    }

    function displayJobPreference(preferences){
        var jobPerferenceHtml = '';
        for(var i=preferences.length-1; i>=0; --i){
            jobPerferenceHtml = jobPerferenceHtml + Api.render(`
                <div class="panel user-job-preference-item" data-perference="{preferenceId}">
                    <div class="panel-heading">
                        <h3 class="panel-title"></h3>
                        <div class="panel-actions">
                            <div class="dropdown">
                                <a class="panel-action user-job-preference-edit" data-toggle="dropdown" href="#" data-perference="{preferenceId}" aria-expanded="false" title="Edit">
                                    <i class="icon wb-pencil" aria-hidden="true"></i>
                                </a>
                                <a class="panel-action user-job-preference-delete" data-toggle="modal" data-target="#exampleNiftyFadeScale" href="#" data-perference="{preferenceId}" aria-expanded="false" title="Delete">
                                    <i class="icon wb-trash" aria-hidden="true"></i>
                                </a>
                                <a class="panel-action user-job-preference-edit-cancel" data-toggle="dropdown" href="#" data-perference="{preferenceId}" aria-expanded="false" title="Cancel" style="display:none;">
                                    <i class="icon wb-close" aria-hidden="true"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="panel-body">
                        <form id="exampleFullForm" autocomplete="off" novalidate="novalidate" class="fv-form fv-form-bootstrap"><button type="submit" class="fv-hidden-submit" style="display: none; width: 0px; height: 0px;"></button>
                            <div class="row row-lg">
                                <div class="col-lg-6 form-horizontal">
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Job Title</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control  user-jp-job-title" name="job_title" value="{title}" disabled="disabled" data-perference="{preferenceId}">
                                            <input type="text" class="form-control user-jp-job-title-id" name="job_title_id" value="{titleId}" disabled="disabled" data-perference="{preferenceId}" style="display: none;">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Salary from</label>
                                        <div class="col-sm-9">
                                            <div class="input-daterange">
                                                <div class="input-group col-sm-6">
                                                    <input type="number" class="form-control user-jp-salary-from" name="start" value="{salaryFrom}" disabled="disabled" data-perference="{preferenceId}">
                                                    <span class="input-group-addon">to</span>
                                                </div>
                                                <div class="input-group col-sm-6">
                                                    <input type="number" class="form-control user-jp-salary-to" name="end" value="{salaryTo}" disabled="disabled" data-perference="{preferenceId}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6 form-horizontal">
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Job Type</label>
                                        <div class="col-sm-9">
                                            <select class="form-control form-control-sm user-jp-job-type" name="job_type_key" disabled="disabled" data-perference="{preferenceId}">
                                                <option value="full_time" {ftSelected}>Full-time</option>
                                                <option value="part_time" {ptSelected}>Part-time</option>
                                                <option value="contract" {ctSelected}>Contract</option>
                                                <option value="temp" {teSelected}>Temp</option>
                                                <option value="internship" {ipSelected}>Internship</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Location</label>
                                        <div class="col-sm-9">
                                            <select class="form-control form-control-sm user-jp-location" name="location_key" data-value="{location}" data-perference="{preferenceId}" disabled>
                                                <option value="caloocan" >Caloocan</option>
                                                <option value="las_pi" >Las Piñas</option>
                                                <option value="makati"  selected >Makati</option>
                                                <option value="malabon" >Malabon</option>
                                                <option value="mandaluyong" >Mandaluyong</option>
                                                <option value="manila" >Manila</option>
                                                <option value="marikina" >Marikina</option>
                                                <option value="muntinlupa" >Muntinlupa</option>
                                                <option value="navotas" >Navotas</option>
                                                <option value="para" >Parañaque</option>
                                                <option value="pasay" >Pasay</option>
                                                <option value="pasig" >Pasig</option>
                                                <option value="quezon_city" >Quezon City</option>
                                                <option value="san_juan" >San Juan</option>
                                                <option value="taguig" >Taguig</option>
                                                <option value="valenzuela" >Valenzuela</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group col-lg-12 text-right padding-top-m" style="display:none;">
                                    <button type="button" class="btn btn-primary user-jp-submit" id="validateButton1" data-perference="{preferenceId}">Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            `, {
                preferenceId : preferences[i]['id'],
                title : preferences[i]['job_title'],
                titleId : preferences[i]['job_title_id'],
                ftSelected : preferences[i]['job_type_key'] == 'full_time' ? 'selected="selected"' : '',
                ptSelected : preferences[i]['job_type_key'] == 'part_time' ? 'selected="selected"' : '',
                ctSelected : preferences[i]['job_type_key'] == 'contract' ? 'selected="selected"' : '',
                teSelected : preferences[i]['job_type_key'] == 'temp' ? 'selected="selected"' : '',
                ipSelected : preferences[i]['job_type_key'] == 'internship' ? 'selected="selected"' : '',
                salaryFrom : preferences[i]['salary_range_from'],
                salaryTo : preferences[i]['salary_range_to'],
                location : preferences[i]['location_key'],
            });
        }
        $('#user-job-preference-panel').html(jobPerferenceHtml);
        $('.user-jp-location').each(function(i, obj){
            var value = $(obj).data('value');
            $(obj).find('option[value="'+value+'"]').attr('selected', 'selected');
        });
        $('.user-jp-job-title').keyup(function(e){
            var preferenceId = $(this).data('perference');
            if(e.which != 13){
                        $('.user-jp-job-title-id[data-perference="'+preferenceId+'"]').val(0);
            }
        });
        var jobTitleAutoComplete = setInterval(function(){
            // console.log('Waiting for data to finish [Job Title Auto Complete] ...');
            if(jobTitleList){
                $('#ajp-job-title').autocomplete({
                    source: jobTitleList,
                    select: function( event, ui ) {
                        $('#ajp-job-title-id').val(ui.item.jtid);
                    }
                });
                $('.user-jp-job-title').autocomplete({
                    source: jobTitleList,
                    select: function( event, ui ) {
                        var preferenceId = $(this).data('perference');
                        $('.user-jp-job-title-id[data-perference="'+preferenceId+'"]').val(ui.item.jtid);
                    }
                });
                clearInterval(jobTitleAutoComplete);
            }
        }, 400);
        $('.user-job-preference-edit').click(function(){
            var perferenceId = $(this).data('perference');
            $('.user-job-preference-edit-cancel[data-perference="'+perferenceId+'"]').css('display', 'inline-block');
            $('.user-jp-job-title[data-perference="'+perferenceId+'"]').removeAttr('disabled');
            $('.user-jp-job-title-id[data-perference="'+perferenceId+'"]').removeAttr('disabled');
            $('.user-jp-salary-from[data-perference="'+perferenceId+'"]').removeAttr('disabled');
            $('.user-jp-salary-to[data-perference="'+perferenceId+'"]').removeAttr('disabled');
            $('.user-jp-location[data-perference="'+perferenceId+'"]').removeAttr('disabled');
            $('.user-jp-job-type[data-perference="'+perferenceId+'"]').removeAttr('disabled');
            $('.user-jp-submit[data-perference="'+perferenceId+'"]').parent().css('display', 'block');
            return false;
        });
        $('.user-job-preference-edit-cancel').click(function(){
            var perferenceId = $(this).data('perference');
            $('.user-job-preference-edit-cancel[data-perference="'+perferenceId+'"]').css('display', 'none');
            $('.user-jp-job-title[data-perference="'+perferenceId+'"]').attr('disabled', 'disabled');
            $('.user-jp-job-title-id[data-perference="'+perferenceId+'"]').attr('disabled', 'disabled');
            $('.user-jp-salary-from[data-perference="'+perferenceId+'"]').attr('disabled', 'disabled');
            $('.user-jp-salary-to[data-perference="'+perferenceId+'"]').attr('disabled', 'disabled');
            $('.user-jp-location[data-perference="'+perferenceId+'"]').attr('disabled', 'disabled');
            $('.user-jp-job-type[data-perference="'+perferenceId+'"]').attr('disabled', 'disabled');
            $('.user-jp-submit[data-perference="'+perferenceId+'"]').parent().css('display', 'none');
            return false;
        });
        $('.user-job-preference-delete').click(function(){
            var preferenceId = $(this).data('perference');
            var deleteConfirm = window.confirm('Are you sure to elete this job perference?');
            if(deleteConfirm){
                Api.Delete('deleteUserJobPreference', {uid:uid,preferenceId:preferenceId}, function(object, error){
                    if(!error && object['status_code'] && object['status_code'] == 200 && object['message'] && object['message'] == 'OK'){
                        $('.user-job-preference-item[data-perference="'+preferenceId+'"]').remove();
                        $.showSuccess('Delete user job perference successfully.', 400);
                    }else{
                        $.showError('Something error, retry later.', 300);
                    }
                });
            }
            return false;
        });
        $('.user-jp-submit').click(function(){
            var preferenceId = $(this).data('perference');
            var jobTitle = $('.user-jp-job-title[data-perference="'+preferenceId+'"]').val(),
                jobTitleId = parseInt($('.user-jp-job-title-id[data-perference="'+preferenceId+'"]').val()),
                from = parseInt($('.user-jp-salary-from[data-perference="'+preferenceId+'"]').val()),
                to = parseInt($('.user-jp-salary-to[data-perference="'+preferenceId+'"]').val()),
                jobType = $('.user-jp-job-type[data-perference="'+preferenceId+'"]').val(),
                currency = '',
                location = $('.user-jp-location[data-perference="'+preferenceId+'"]').val();

            if(jobTitle.length == 0 || isNaN(jobTitleId) || jobTitleId == 0){
                $.showError('Job perference title info error.', 400);
                return false;
            }
            // console.log(from);
            // console.log(to);
            if(isNaN(from) || isNaN(to) || 0 == from || 0 == to || from > to){
                $.showError('Job perference salary info error.', 400);
                return false;
            }
            if(jobType != 'full_time' && jobType != 'part_time' && jobType != 'contract' && jobType != 'temp' && jobType != 'internship'){
                $.showError('Job perference job type info error.', 400);
                return false;
            }
            if(location == ''){
                $.showError('Job perference location info error.', 400);
                return false;
            }
            var perferenceData = {
                uid : uid,
                preferenceId : preferenceId,
                job_title_id : jobTitleId,
                job_title : jobTitle,
                location_key : location,
                salary_range_from : from,
                salary_range_to : to,
                currency : currency,
                job_type_key : jobType,
            };
            // console.log(perferenceData);
            Api.Put('updateUserJobPerference', perferenceData, function(object, error){
                // console.log(object);
                if(!error && object['status_code'] && object['status_code'] == 200){
                    $.showSuccess('Update user job preference successfully.', 400, function(){
                        window.location.reload();
                    });
                }else{
                    $.showError('Something error, retry later.', 300);
                }
            }, {uid : true, preferenceId : true});
            return false;
        });
    }

    function displayTasks(){

    }

    function displayRestrictions(){

    }

    function displayHistory(){

    }

    function displayNotes(){

    }

    function bindCreationPanelSubmitEvent(){
        $('#awe-start').datepicker({format: 'yyyy-mm-dd'});
        $('#awe-end').datepicker({format: 'yyyy-mm-dd'});
        $('#awe-job-title').keyup(function(e){
            if(e.which != 13){
                $('#awe-job-title-id').val(0);
            }
        });
        $('#awe-company-name').keyup(function(e){
            if(e.which != 13){
                $('#awe-company-id').val(0);
            }
        });
        $('#awe-submit').click(function(){
            var jobTitle = $('#awe-job-title').val(),
                jobTitleId = parseInt($('#awe-job-title-id').val()),
                companyName = $('#awe-company-name').val(),
                companyId = parseInt($('#awe-company-id').val()),
                periodStart = $('#awe-start').val(),
                periodEnd = $('#awe-end').val(),
                description = $('#awe-description').val(),
                block = $('#awe-block').is(':checked') ? 1 : 0;
            if(jobTitle.length == 0 || isNaN(jobTitleId) || jobTitleId == 0){
                $.showError('Work experience job title can not be empty.', 400);
                return false;
            }
            if(companyName.length == 0 || isNaN(companyId) || companyId == 0){
                $.showError('Work experience company can not be empty.', 400);
                return false;
            }
            if(periodStart.length == 0 || periodEnd.length == 0){
                $.showError('Work experience period error.', 400);
                return false;
            }
            if(periodEnd < periodStart){
                $.showError('Work experience end date can not less than start date.', 400);
                return false;
            }
            if(description.length == 0){
                $.showError('Work experience description can not be empty', 400);
                return false;
            }
            var workData = {
                uid : uid,
                company_id : companyId,
                company : companyName,
                job_title_id : jobTitleId,
                job_title : jobTitle,
                working_period_from : periodStart,
                working_period_to : periodEnd,
                is_currently_work_here : 0,
                description : description,
                is_company_blacklisted : block,
            };
            // console.log(workData);
            Api.Post('createUserWorkExperience', workData, function(object, error){
                if(!error && object['status_code'] && object['status_code'] == 201){
                    $.showSuccess('Create user work experience successfully.', 400, function(){
                        window.location.reload();
                    });
                }else{
                    $.showError('Something error, retry later.', 300);
                }
            }, 'x-www-form-urlencoded', {uid:true});
            return false;
        });

        $('#add-edu-school-name').keyup(function(e){
            if(e.which != 13){
                $('#add-edu-school-id').val(0);
            }
        });
        $('#add-edu-submit').click(function(){
            var schoolName = $('#add-edu-school-name').val(),
                schoolId = parseInt($('#add-edu-school-id').val()),
                degree = $('#add-edu-degree').val(),
                grade = $('#add-edu-grade').val().trim(),
                from = $('#add-edu-start').val(),
                to = $('#add-edu-end').val(),
                field = $('#add-edu-field').val(),
                description = $('#add-edu-description').val();
            if(schoolName.length == 0 || isNaN(schoolId) || schoolId == 0){
                $.showError('School info can not be empty.', 400);
                return false;
            }
            if(degree != 'diploma' && degree != 'bachelor' && degree != 'master' && degree != 'doctor'){
                $.showError('Education degree is wrong.', 400);
                return false;
            }
            if(grade.length == 0){
                $.showError('Education grade is wrong.', 400);
                return false;
            }
            if(from.length == 0 || to.length == 0 || from > to){
                $.showError('Education period is wrong.', 400);
                return false;
            }
            if(field.length == 0){
                $.showError('Education field can not be empty.', 400);
                return false;
            }
            if(description.length == 0){
                $.showError('Education description can not be empty.', 400);
                return false;
            }
            var eduData = {
                uid : uid,
                school_id : schoolId,
                school : schoolName,
                degree_key : degree,
                field_of_study : field,
                grade : grade,
                description : description,
                study_period_from : from,
                study_period_to : to,
            };
            // console.log(eduData);
            Api.Post('addEduExperience', eduData, function(object, error){
                if(!error && object['status_code'] && object['status_code'] == 201){
                    $.showSuccess('Create user education experience successfully.', 400, function(){
                        window.location.reload();
                    });
                }else{
                    $.showError('Something error, retry later.', 300);
                }
            }, 'x-www-form-urlencoded', {uid : true});
            return false;
        });

        $('#ajp-job-title').keyup(function(e){
            if(e.which != 13){
                $('#ajp-job-title-id').val(0);
            }
        });
        $('#ajp-submit').click(function(){
            var jobTitle = $('#ajp-job-title').val(),
                jobTitleId = parseInt($('#ajp-job-title-id').val()),
                from = parseInt($('#ajp-salary-from').val()),
                to = parseInt($('#ajp-salary-to').val()),
                jobType = $('#ajp-job-type').val(),
                currency = '',
                location = $('#ajp-location').val();

            if(jobTitle.length == 0 || isNaN(jobTitleId) || jobTitleId == 0){
                $.showError('Job perference title info error.', 400);
                return false;
            }
            if(isNaN(from) || isNaN(to) || 0 == from || 0 == to || from > to){
                $.showError('Job perference salary info error.', 400);
                return false;
            }
            if(jobType != 'full_time' && jobType != 'part_time' && jobType != 'contract' && jobType != 'temp' && jobType != 'internship'){
                $.showError('Job perference job type info error.', 400);
                return false;
            }
            if(location == ''){
                $.showError('Job perference location info error.', 400);
                return false;
            }
            var perferenceData = {
                uid : uid,
                job_title_id : jobTitleId,
                job_title : jobTitle,
                location_key : location,
                salary_range_from : from,
                salary_range_to : to,
                currency : currency,
                job_type_key : jobType,
            };
            // console.log(perferenceData);
            Api.Post('createUserJobPerference', perferenceData, function(object, error){
                if(!error && object['status_code'] && object['status_code'] == 201){
                    $.showSuccess('Create user job preference successfully.', 400, function(){
                        window.location.reload();
                    });
                }else{
                    $.showError('Something error, retry later.', 300);
                }
            }, 'x-www-form-urlencoded', {uid : true});
            return false;
        });
    }

    $('.nav-link').click(function(){
        var basicUserType = $(this).data('usertype');
        $('.nav-item').removeClass('active');
        if(basicUserType == 'seeker'){
            $('.basic-info-panel').removeClass('basic-info-panel-active').eq(0).addClass('basic-info-panel-active');
            $('.nav-item[data-usertype="seeker"]').addClass('active');
        }
        if(basicUserType == 'recruiter'){
            $('.basic-info-panel').removeClass('basic-info-panel-active').eq(1).addClass('basic-info-panel-active');
            $('.nav-item[data-usertype="recruiter"]').addClass('active');
        }
        $('#edit-user-basic-info-cancel').trigger('click');
        return false;
    });
});
</script>
<div class="modal fade" id="educationExperienceModal" aria-labelledby="educationExperienceModalLabel" role="dialog" tabindex="-1" aria-hidden="true" style="display: none;z-index: 3;">
    <div class="modal-dialog modal-simple modal-center">
        <form class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="educationExperienceModalLabel">Add Education Experience</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="form-group" style="height: 20px">
                        <label class="col-sm-3 control-label">School</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="add-edu-school-name" name="school" data-fv-notempty="true" data-fv-notempty-message="This is required" data-fv-field="school">
                            <input type="text" name="" id="add-edu-school-id" value="0" style="display: none;">
                            <small class="help-block" data-fv-validator="notEmpty" data-fv-for="requiredInput" data-fv-result="NOT_VALIDATED" style="display: none;"></small></div>
                    </div>
                    <div class="form-group" style="height: 20px">
                        <label class="col-sm-3 control-label">Degree</label>
                        <div class="col-sm-9">
                            <select class="form-control form-control-sm" name="degree_key" id="add-edu-degree">
                                <option value="diploma" >Diploma</option>
                                <option value="bachelor" >Bachelor</option>
                                <option value="master" >Master</option>
                                <option value="doctor" >Doctor</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group" style="height: 20px">
                        <label class="col-sm-3 control-label">Grade</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" name="grade" id="add-edu-grade" data-fv-notempty="true" data-fv-notempty-message="This is required" data-fv-field="grade">
                            <small class="help-block" data-fv-validator="notEmpty" data-fv-for="requiredInput" data-fv-result="NOT_VALIDATED" style="display: none;">This is required</small>
                        </div>
                    </div>
                    <div class="form-group" style="height: 20px">
                        <label class="col-sm-3 control-label">From</label>
                        <div class="col-sm-9">
                            <div class="input-daterange">
                                <div class="input-group col-sm-6">
                                      <span class="input-group-addon">
                                        <i class="icon wb-calendar" aria-hidden="true"></i>
                                      </span>
                                    <input type="text" class="form-control" id="add-edu-start" name="start">
                                </div>
                                <div class="input-group col-sm-6">
                                    <span class="input-group-addon">to</span>
                                    <input type="text" class="form-control" id="add-edu-end" name="end">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group" style="height: 20px">
                        <label class="col-sm-3 control-label">Field of Study</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="add-edu-field" name="field_of_study" >
                        </div>
                    </div>
                    <div class="form-group" style="height: 20px">
                        <label class="col-sm-3 control-label">Description</label>
                        <div class="col-sm-9">
                            <textarea id="add-edu-description" class="maxlength-textarea form-control" data-plugin="maxlength" name="description" rows="5" maxlength="300"></textarea>
                        </div>
                    </div>
                    <div class="col-md-12 float-right">
                        <button class="btn btn-primary btn-outline" data-dismiss="modal" id="add-edu-submit" type="button">Submit</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>     
<div class="modal fade" id="tasksModal" aria-labelledby="tasksModalLabel" role="dialog" tabindex="-1" aria-hidden="true" style="display: none;z-index: 3;">
    <div class="modal-dialog modal-simple modal-center">
        <form class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="tasksModalLabel">Add Tasks</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="form-group" style="height: 20px">
                        <label class="col-sm-3 control-label">Daily Chat Limit</label>
                        <div class="col-sm-9">
                            <input type="number" class="form-control" name="chat_limit" data-fv-notempty="true" data-fv-notempty-message="This is required" data-fv-field="chat_limit">
                            <small class="help-block" data-fv-validator="notEmpty" data-fv-for="requiredInput" data-fv-result="NOT_VALIDATED" style="display: none;"></small></div>
                    </div>
                    <div class="form-group" style="height: 20px">
                        <label class="col-sm-3 control-label">Daily Send Resume Limit</label>
                        <div class="col-sm-9">
                            <input type="number" class="form-control" name="send_limit" data-fv-notempty="true" data-fv-notempty-message="This is required" data-fv-field="send_limit">
                            <small class="help-block" data-fv-validator="notEmpty" data-fv-for="requiredInput" data-fv-result="NOT_VALIDATED" style="display: none;"></small></div>
                    </div>

                    <div class="col-md-12 float-right">
                        <button class="btn btn-primary btn-outline" data-dismiss="modal" type="button">Submit</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="modal fade" id="jobPerferenceModal" aria-labelledby="jobPerferenceModalLabel" role="dialog" tabindex="-1" aria-hidden="true" style="display: none;z-index: 3;">
    <div class="modal-dialog modal-simple modal-center">
        <form class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="jobPerferenceModalLabel">Add Job Preference</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="form-group" style="height: 20px;">
                        <label class="col-sm-3 control-label">Job Title</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" name="job_title" id="ajp-job-title">
                            <input type="text" class="form-control" name="job_title_id" id="ajp-job-title-id" style="display: none;">
                        </div>
                     </div>
                    <div class="form-group" style="height: 20px;">
                        <label class="col-sm-3 control-label">Salary from</label>
                        <div class="col-sm-9">
                            <div class="input-daterange">
                                <div class="input-group col-sm-6">
                                    <input type="number" class="form-control" name="salary_start" min="10000" max="100000" step="1000" id="ajp-salary-from">
                                    <span class="input-group-addon">to</span>
                                </div>
                                <div class="input-group col-sm-6">
                                    <input type="number" class="form-control" name="salary_end" min="10000" step="1000" max="200000" id="ajp-salary-to">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Job Type</label>
                        <div class="col-sm-9">
                            <select class="form-control form-control-sm" name="job_type_key" id="ajp-job-type">
                                <option value="full_time" >Full-time</option>
                                <option value="part_time" >Part-time</option>
                                <option value="contract" >Contract</option>
                                <option value="temp" >Temp</option>
                                <option value="internship" >Internship</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Location</label>
                        <div class="col-sm-9">
                            <select class="form-control form-control-sm" name="location_key" id="ajp-location">
                                <option value="caloocan" >Caloocan</option>
                                <option value="las_pi" >Las Piñas</option>
                                <option value="makati"  selected >Makati</option>
                                <option value="malabon" >Malabon</option>
                                <option value="mandaluyong" >Mandaluyong</option>
                                <option value="manila" >Manila</option>
                                <option value="marikina" >Marikina</option>
                                <option value="muntinlupa" >Muntinlupa</option>
                                <option value="navotas" >Navotas</option>
                                <option value="para" >Parañaque</option>
                                <option value="pasay" >Pasay</option>
                                <option value="pasig" >Pasig</option>
                                <option value="quezon_city" >Quezon City</option>
                                <option value="san_juan" >San Juan</option>
                                <option value="taguig" >Taguig</option>
                                <option value="valenzuela" >Valenzuela</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-12 float-right">
                        <button class="btn btn-primary btn-outline" data-dismiss="modal" type="button" id="ajp-submit">Submit</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="modal fade" id="exampleFormModal" aria-labelledby="exampleFormModalLabel" role="dialog" tabindex="-1" aria-hidden="true" style="display: none;z-index: 3;">
    <div class="modal-dialog modal-simple modal-center">
        <form class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="exampleFormModalLabel">Add Note</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xl-4 form-group">
                        <input type="text" class="form-control" name="note" placeholder="Add note here">
                    </div>
                    <div class="col-md-12 float-right">
                        <button class="btn btn-primary btn-outline" data-dismiss="modal" type="button">Submit</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="modal fade" id="workExperienceModal" aria-labelledby="workExperienceModalLabel" role="dialog" tabindex="-1" aria-hidden="true" style="display: none;z-index: 3;">
    <div class="modal-dialog modal-simple modal-center">
        <form class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="workExperienceModalLabel">Add Work Experience</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="form-group" style="height: 20px;">
                        <label class="col-sm-3 control-label">Job Title</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" name="job_title" id="awe-job-title" />
                            <input type="hidden"  name="job_title_id" id="awe-job-title-id" />
                        </div>
                    </div>
                    <div class="form-group" style="height: 20px;">
                        <label class="col-sm-3 control-label">Company Name</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" name="company_name" id="awe-company-name">
                            <input type="hidden"  name="company_id"  id="awe-company-id"/>
                        </div>
                    </div>
                    <div class="form-group" style="height: 20px;">
                        <label class="col-sm-3 control-label">From</label>
                        <div class="col-sm-9">
                            <div class="input-daterange">
                                <div class="input-group col-sm-6">
                                      <span class="input-group-addon">
                                        <i class="icon wb-calendar" aria-hidden="true"></i>
                                      </span>
                                    <input type="text" class="form-control" id="awe-start" name="start">
                                </div>
                                <div class="input-group col-sm-6">
                                    <span class="input-group-addon">to</span>
                                    <input type="text" class="form-control" name="end" id="awe-end">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group" style="height: 20px;">
                        <label class="col-sm-3 control-label">Description</label>
                        <div class="col-sm-9">
                            <textarea class="maxlength-textarea form-control" data-plugin="maxlength"  name="description" rows="5" maxlength="700" id="awe-description"></textarea>
                        </div>
                    </div>
                    <div class="form-group" style="height: 20px;margin-top:75px;">
                        <label class="col-sm-3 control-label"></label>
                        <div class="col-sm-9">
                            <div class="checkbox-custom checkbox-primary">
                                <input type="checkbox" id="awe-block" name="block" value="block" required="" data-fv-field="block">
                                <label for="awe-block">Block all recruiters from this company</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12 float-right">
                        <button class="btn btn-primary btn-outline" data-dismiss="modal" type="button" id="awe-submit">Submit</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>   
	<!-- Modal -->
	<div class="modal fade" id="confirmModal" aria-hidden="true" role="dialog" tabindex="-1">
	  <div class="modal-dialog modal-center">
		<div class="modal-content">
		  <div class="modal-header">
			<h4 class="modal-title"></h4>
		  </div>
		  <div class="modal-body">
			<p></p>
		  </div>
		  <div class="modal-footer">
			<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
			<button type="button" class="btn btn-primary"></button>
		  </div>
		</div>
	  </div>
	</div>
	<div class="modal fade" id="alertModal" aria-hidden="true" role="dialog" tabindex="-1">
	  <div class="modal-dialog modal-center">
		<div class="modal-content">
		  <div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">×</span>
            </button>
			<h4 class="modal-title"></h4>
		  </div>
		  <div class="modal-body">
			<p></p>
		  </div>
		</div>
	  </div>
	</div>
	<!-- End Modal -->
  </div>
  <!-- End Page -->

  <!-- Footer -->
  <script type="text/javascript" src="../_resource/js/footer.js"></script>

  <script type="text/javascript">
    // $(".btn-primary").parents(".form-group").hide();
    // $("input,textarea").attr("disabled",true);
    // $(".input-daterange input").attr("disabled",true);
    // $("input[type=checkbox]").attr("disabled",true);
    // $("select").attr("disabled",true);
    // $("#resumeForm").find("input").attr("disabled",false);
    // $(".modal-body input,.modal-body textarea").attr("disabled",false);
    // $(document).on("click",".panel-action .wb-pencil",function(){
    //     var html = '<a class="panel-action" data-toggle="dropdown" href="#" aria-expanded="false" title="Cancel"><i class="icon wb-close" aria-hidden="true"></i></a>';
    //     var isset= $(this).parents(".dropdown").has(".wb-close").length;
    //     if(isset < 1) {
    //         $(this).parents(".dropdown").append(html);
    //     }else{
    //         $(this).parents(".dropdown").find(".panel-action").show();;
    //     }
    //     $(this).parents(".panel").find("input,textarea").attr("disabled",false);
    //     $(this).parents(".panel").find(".form-group,.btn-primary").show();
    //     $(this).parents(".panel").find(".input-daterange input").attr("disabled",false);
    //     $(this).parents(".panel").find("input[type=checkbox]").attr("disabled",false);
    //     $(this).parents(".panel").find("select").attr("disabled",false);
    // })

    // $(document).on("click",".panel-action .wb-plus-circle",function(){
    //     $(".modal").find("input,textarea").attr("disabled",false);
    //     $(".modal").find(".input-daterange input").attr("disabled",false);
    //     $(".modal").find("input[type=checkbox]").attr("disabled",false);
    //     $(".modal").find("select").attr("disabled",false);
    // })

    // $(document).on("click",".panel-action .wb-close",function(){
    //     $(this).parents(".panel").find("input,textarea").attr("disabled",true);
    //     $(this).parents(".panel").find(".input-daterange input").attr("disabled",true);
    //     $(this).parents(".panel").find("input[type=checkbox]").attr("disabled",true);
    //     $(this).parents(".panel").find("select").attr("disabled",true);
    //     $("#resumeForm").find("input").attr("disabled",false);;
    //     $(this).parents(".panel").find(".form-group .btn-primary").hide();
    //     $(this).parents(".panel-action").hide();
    // })

    // $(document).on("submit",".panel-body form",function(){
    //     return false;
    // })
    // $(document).on("click", ".btn-primary", function(){
    //     $(this).parents(".panel").find("input,textarea").attr("disabled",true);
    //     $(this).parents(".panel").find(".input-daterange input").attr("disabled",true);
    //     $(this).parents(".panel").find("input[type=checkbox]").attr("disabled",true);
    //     $(this).parents(".panel").find("select").attr("disabled",true);
    //     $("#resumeForm").find("input").attr("disabled",false);;
    //     $(this).parents(".form-group").hide();
    //     $(this).parents(".panel").find(".panel-action[title=Cancel]").hide();
    // })

    // $(document).on("keydown", "input[name=job_title],input[name=school],input[name=company_name]",function(){
    //     var obj = $(this);
    //     var name = $(this).attr("name");
    //     var val = $(this).attr("val");

    //     if(name == "job_title"){
    //         var type = 1;
    //     }else if(name == "school"){
    //         var type = 2;
    //     }else if(name == "company_name"){
    //         var type = 3;
    //     }
    //     var data = {
    //         keyword : val,
    //         type : type
    //     };
    //     $.post("http://admin.html.me/User/suggestLists",data,function(res){
    //         obj.siblings(".twitter-typeahead").remove();
    //         obj.after(res);
    //     });
    // })

    // $(document).on("blur", "input[name=job_title],input[name=school],input[name=company_name]",function(){
    //     var obj = $(this).siblings(".twitter-typeahead");
    //     setTimeout(function(){
    //         obj.remove();
    //     },200)

    // })

    // $(document).on("click", ".tt-selectable",function(){
    //     var type = $(this).parents().data("type");
    //     var id = $(this).data("id");
    //     var text = $(this).text();
    //     if(type == 1){
    //         $(this).parents(".twitter-typeahead").siblings("input[name=job_title_id]").val(id);
    //         $(this).parents(".twitter-typeahead").siblings("input[name=job_title]").val(text);
    //     }else if(type == 2){
    //         $(this).parents(".twitter-typeahead").siblings("input[name=school_id]").val(id);
    //         $(this).parents(".twitter-typeahead").siblings("input[name=school]").val(text);
    //     }else if(type == 3){
    //         $(this).parents(".twitter-typeahead").siblings("input[name=company_id]").val(id);
    //         $(this).parents(".twitter-typeahead").siblings("input[name=company_name]").val(text);
    //     }
    //     $(this).parents(".twitter-typeahead").remove();
    // })



</script>
  <script>
    (function(document, window, $) {
      'use strict';

      var Site = window.Site;
      $(document).ready(function() {
        Site.run();
          $('textarea[maxlength]').maxlength({
              threshold: 1000,
              placement: 'bottom-left-inside'
          });

          $.components.register("datepicker",{mode:"default",defaults:{autoclose:!0}});

        if (RUN_FUNCS.length > 0) {
          for(var i = 0; i < RUN_FUNCS.length; i++) {
            RUN_FUNCS[i].call();
          }
        }
      });
    })(document, window, jQuery);


  </script>
</body>
</html>